<template>
  <div class="Operation-home">
    <div class="Operation-banner">
      <div class="Operation-banner-tip">
        <div class="title">运维中心</div>
        <div class="desc">运维中心主要包括：服务治理Nacos、Jenkins、Sentinel、RocketMQ</div>

      </div>
    </div>
    <div class="flex">
      <div v-for="(item, i) in list" :key="i" @click="goFn(item)" class="flex-div item-div">
        <div class="img-div"><img :src="item.src"></div>

        <div class="name">{{ item.name }}</div>
        <div class="desc">{{ item.desc }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      list: [{
        name: 'Nacos',
        url: 'http://hxx.sicheng.store/nacos',
        src: require('../../../assets/img/undraw_Dev_productivity_re_fylf.png'),
        desc: '实现服务注册与发现、服务网关、配置中心等功能'
      }, {
        name: 'Jenkins',
        url: 'http://hxx.sicheng.store',
        src: require('../../../assets/img/undraw_OS_upgrade_re_r0qa.png'),
        desc: '自动化部署，解决集成、测试、部署等重复性工作'
      }, {
        name: 'Sentinel',
        url: 'http://hxx.sicheng.store:8888',
        // url: 'http://hxx.sicheng.store:8888',
        src: require('../../../assets/img/undraw_Mobile_interface_re_1vv9.png'),
        desc: '实时监控、熔断限流、细粒度统一的规则配置'
      }, {
        name: 'RocketMQ',
        url: 'http://hxx.sicheng.store:9993/',
        src: require('../../../assets/img/undraw_Interior_design_re_7mvn.png'),
        desc: '高性能、高实时、分布式的队列模型消息中间件'
      }]
    }
  },
  methods: {
    goFn (item) {
      window.open(item.url, '_blank')
    }
  }
}
</script>

<style lang="scss">
.Operation-home {
  line-height: 1.5;
}

.Operation-banner {
  width: 100%;
  height: 300px;
  background: url('../../../assets/img/analytics.png') no-repeat;
  // background: url('../../../assets/img/undraw_To_the_moon_re_q21i.png') no-repeat;
  background-size: 40% 100%;
  background-position-x: 150px;
  position: relative;
  border-radius: 10px;
  // border: 1px solid #eee;
  .Operation-banner-tip {
    position: absolute;
    right: 30%;
    top: 40%;

    .title {
      font-size: 32px;
      color: #000;
    }

    .desc {
      width: 200px;
      color: #989898;
    }
  }

  // width: 100%;
  // height: 300px;
  // background: url('../../../assets/img/VCG211258127906.png') no-repeat;
  // background-size: 80% 100%;
  // background-position-x: 50%;
  // position: relative;
  // .Operation-banner-tip {
  //   position: absolute;
  //   left: 200px;
  //   top: 10%;
  //   .title {
  //     font-size: 32px;
  //     color: #000;
  //   }
  //   .desc {
  //     width: 200px;
  //     color: #989898;
  //   }
  // }
}

.flex {
  margin-top: 20px;
  display: flex;
  justify-content: center;

  .flex-div {
    width: 220px;
    height: 225px;
    border: 1px solid #eee;
    border-radius: 10px;
    text-align: center;
    // line-height: 200px;
    font-size: 18px;
    cursor: pointer;
    color: #2565B0
  }

  .flex-div + .flex-div {
    margin-left: 10px;
  }

  .desc {
    width: 200px;
    font-size: 14px;
    text-align: center;
    color: #989898;
    margin: 0 auto;
  }
}

.item-div {
  .img-div {
    width: 100%;
    height: 150px;
    border-radius: 10px;

    > img {
      border-radius: 10px;
      width: 100%;
      height: 100%;
    }
  }
}
</style>

